import local from "@/utils/local"
import {defineStore} from "pinia"
import {nextTick, reactive, ref} from "vue"

export const useSettingStore = defineStore(
    "setting",
    () => {
        /***
         * @刷新
         */
        const flush = ref(false)
        const changeFlush = () => {
            flush.value = !flush.value
        }
        /***
         * @侧边栏的折叠
         */
        const flag = ref(false)
        const changeFlag = () => {
            flag.value = !flag.value
        }
        /**
         * @主题相关
         */
        const dark = ref(false) //|| GETDARK()
        const changeDark = () => {
            // dark.value = !dark.value
            // SETDARK(dark.value)
        }
        /**
         * @页面设置
         */
        const page_setting = reactive({
            isShow_Tagview: true,
            isShow_Logo: true,
            isShow_Bread: true,
        })

        //语言列表
        const languages = ref([
            {label: '简体中文', value: 'zh-cn', alias: 'CHS'},
            {label: '繁体中文', value: 'zh-tw', alias: 'CHT'},
            {label: 'English', value: 'en', alias: 'EN'},
        ])

        // 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
        const globalI18n = ref(local.getItem('LANG', 'zh-cn'));

        // 获取语言别名
        const getLangAlias = () => {
            return languages.value.find(item => item.value === globalI18n.value)?.alias
        }

        // 语言切换
        const toggleLanguage = (lang: string) => {
            globalI18n.value = lang;
            local.setItem('LANG', lang);
        };

        return {
            globalI18n,
            languages,
            toggleLanguage,
            getLangAlias,
            flag,
            dark,
            flush,
            page_setting,
            changeFlag,
            changeFlush,
            changeDark,
        }
    },
    {
        persist: {
            key: "settingStore",
            pick: ["flag", "dark"],
            // storage: localStorage,
        },
        // persist: true,
        // persist: {
        //   key: "page_setting",
        //   paths: ["page_setting"],
        // },
    },
)
